<template>
  <div class="assistant-container">
    <el-container class="main-container">
      <MainHeader />
      <el-container class="content-container">
        <el-aside width="200px" class="aside">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            router
          >
            <el-menu-item v-for="menu in menus" :key="menu.path" :index="menu.path">
              <el-icon><component :is="menu.icon" /></el-icon>
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { ChatDotRound, List, Setting, Edit } from "@element-plus/icons-vue";
import MainHeader from "./main/header/header.vue";

export default defineComponent({
  name: "AiAssistant",
  components: {
    MainHeader,
    ChatDotRound,
    List,
    Setting,
    Edit
  },
  setup() {
    const route = useRoute();
    const store = useStore();
    const activeMenu = computed(() => route.path);
    const menus = computed(() => store.getters['main/menus']);

    onMounted(() => {
      store.dispatch('main/loadMenus');
    });

    return {
      activeMenu,
      menus,
    };
  },
});
</script>

<style lang="scss" scoped>
.assistant-container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .content-container {
    flex: 1;
    overflow: hidden;
  }

  .aside {
    background-color: #304156;
    height: 100%;
    overflow: hidden;

    .el-menu-vertical {
      height: 100%;
      border-right: none;
    }
  }

  .main {
    background-color: #f5f7fa;
    padding: 20px;
    height: 100%;
    overflow: auto;
  }
}
</style>
